<template>
  <div id="userList">
    <el-input size="small" @keyup.enter.native="searchHandle" style="width: 300px" v-model="keywords" placeholder="搜索求职者"></el-input>
    <el-button @click="searchHandle()" style="margin-left: 10px" type="primary" icon="el-icon-search" size="small">搜索</el-button>
    <el-table
        height="536"
        :data="userList"
        v-loading="loading"
        element-loading-text="拼命加载中"
        style="width: 99.5%">
      <el-table-column
          label="序号"
          align="center"
          type="index"
          :index="indexMethod">
      </el-table-column>
      <el-table-column
          label="求职者"
          prop="userName"
          align="center"
          show-overflow-tooltip>
      </el-table-column>

      <el-table-column
          label="求职意向"
          prop="expect"
          align="center"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          label="年龄"
          prop="age"
          align="center"
          show-overflow-tooltip>
      </el-table-column>

      <el-table-column
          label="性别"
          prop="sex"
          align="center"
          show-overflow-tooltip>
      </el-table-column>

      <el-table-column
          label="居住地"
          prop="liveCity"
          align="center"
          show-overflow-tooltip>
      </el-table-column>

      <el-table-column
          label="手机号"
          align="center"
          prop="tel"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          label="操作"
          align="center"
      >
        <template slot-scope="scope">
          <el-tooltip class="item" effect="light" content="邀请投递" placement="top" >
            <el-button  size="mini" @click="startSendMsg(scope.row.userName)" type="info" icon="el-icon-s-promotion"/>
          </el-tooltip>
          <el-tooltip class="item" effect="light" content="更多信息" placement="top" >
            <el-button  size="mini" @click="userInfo(scope.row.userId)" type="success" class="iconfont icon-xiangqing"/>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="发送邀请信息" :visible.sync="dialogSendMsg" :close-on-click-modal="false" @close="closeSendMsg">
      <el-input
          type="textarea"
          placeholder="请输入内容"
          v-model="textarea"
          :rows="5"
          maxlength="100"
          show-word-limit
      >
      </el-input>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogSendMsg = false">取 消</el-button>
    <el-button type="primary" @click="sendMsg">发 送</el-button>
  </span>
    </el-dialog>
    <el-dialog title="求职者信息" :visible.sync="dialogTableVisible">
      <el-descriptions class="margin-top" :column="3"  border>
        <el-descriptions-item label="用户名">{{ this.user.userName }}</el-descriptions-item>
        <el-descriptions-item label="真实姓名">{{ this.user.realName }}</el-descriptions-item>
        <el-descriptions-item label="头像">
          <el-avatar :src="this.user.photoUrl" ></el-avatar>
        </el-descriptions-item>
        <el-descriptions-item label="昵称">{{ this.user.pickName }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{ this.user.sex }}</el-descriptions-item>
        <el-descriptions-item label="年龄">{{ this.user.age }}</el-descriptions-item>
        <el-descriptions-item label="毕业院校">{{ this.user.graduate }}</el-descriptions-item>
        <el-descriptions-item label="学历">{{ this.user.edu }}</el-descriptions-item>
        <el-descriptions-item label="居住地">{{ this.user.liveCity }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{ this.user.tel }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{this.user.email}}</el-descriptions-item>
        <el-descriptions-item label="求职意向">{{this.user.expect}}</el-descriptions-item>
        <el-descriptions-item label="QQ">{{this.user.qq}}</el-descriptions-item>
        <el-descriptions-item label="个人介绍">{{this.user.introduce}}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    <el-pagination
        background
        layout="total,prev, pager, next"
        :total="total"
        align="center"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :hide-on-single-page="value"
        style="padding-top: 15px"
    >
    </el-pagination>
  </div>
</template>

<script>
import {getUserList, sendMessage,} from "../../network/companyUser";
import {baseUrl} from "@/network/baseUrl";

export default {
  name: "TalentsSearch",
  data(){
    return{
      userList:[],
      loading:true,
      keywords:'',
      value:false,
      currentPage:1,
      total:1,
      pageSize:9,
      userType:0,
      dialogTableVisible:false,
      user:{},
      photoUrl:'',
      dialogSendMsg:false,
      receiveUserName:'',
      textarea:''
    }
  },

  created() {
    this.handleCurrentChange(this.currentPage);
  },
  methods:{
    handleCurrentChange(currentPage){
      getUserList(this.userType,this.keywords,currentPage,this.pageSize,1).then(res=>{
        this.loading=false;
        this.total=res.data.data.total;
        this.userList=res.data.data.list;
        this.currentPage=currentPage;
      })
    },
    searchHandle(){
      this.currentPage = 1;
      this.handleCurrentChange(this.currentPage)
    },
    indexMethod(index) {
      return (this.currentPage-1)*this.pageSize+1 + index;
    },
    userInfo(userId){
      this.user=this.userList.find((user) => user.userId == userId);
      this.photoUrl=baseUrl()+"/api"+this.user.photoUrl+"/?ser=user";
      this.dialogTableVisible=true;
    },
    startSendMsg(userName){
      this.receiveUserName = userName;
      this.dialogSendMsg = true;
    },
    sendMsg(){
      var sendUserName = localStorage.getItem("company_userName");
      sendMessage(sendUserName,this.receiveUserName,this.textarea).then(res => {
        if(res.data!=undefined){
          this.$message.success("发送成功");
          this.dialogSendMsg = false;
        }
      })
    },
    closeSendMsg(){
      this.textarea = '';
      this.receiveUserName = '';
    }
  }
}
</script>

<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  height:50px;
  color: #99a9bf;
  min-width: 110px;
}
.demo-table-expand .el-form-item {
  margin-left: 50px;
  margin-bottom: 0;
  width: 45%;
}
.el-form-item__content{
  height:50px;
}
</style>